<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车牌识别系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #0E42D2 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-custom">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-car text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-neutral-700">车牌识别系统</h1>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#" class="text-neutral-600 hover:text-primary transition-custom">首页</a></li>
                    <li><a href="#" class="text-neutral-600 hover:text-primary transition-custom">API文档</a></li>
                    <li><a href="#" class="text-neutral-600 hover:text-primary transition-custom">关于我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <section class="max-w-4xl mx-auto bg-white rounded-xl shadow-card p-6 md:p-8 mb-8 transition-custom hover:shadow-card-hover">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700 mb-6 text-center">车牌识别演示</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 左侧：上传区域 -->
                <div class="space-y-6">
                    <div class="border-2 border-dashed border-neutral-300 rounded-lg p-8 text-center transition-custom hover:border-primary cursor-pointer bg-neutral-50" id="drop-area">
                        <i class="fa-solid fa-cloud-upload text-5xl text-neutral-400 mb-4 transition-custom hover:text-primary"></i>
                        <p class="text-neutral-500 mb-2">拖放图片到这里，或</p>
                        <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-custom shadow-md hover:shadow-lg" id="select-image-btn">
                            <i class="fa-solid fa-image mr-2"></i>选择图片
                        </button>
                        <input type="file" id="image-input" accept="image/*" class="hidden">
                        <p class="text-xs text-neutral-400 mt-4">支持 JPG、PNG 格式图片</p>
                    </div>

                    <div class="hidden" id="preview-container">
                        <h3 class="text-lg font-semibold text-neutral-700 mb-3">预览</h3>
                        <div class="relative overflow-hidden rounded-lg border border-neutral-200 bg-neutral-100">
                            <img id="image-preview" src="" alt="预览图片" class="max-w-full max-h-64 object-contain mx-auto">
                            <button id="remove-image-btn" class="absolute top-2 right-2 bg-white/80 hover:bg-white text-neutral-700 rounded-full w-8 h-8 flex items-center justify-center transition-custom shadow-md">
                                <i class="fa-solid fa-times"></i>
                            </button>
                        </div>
                    </div>

                    <button id="recognize-btn" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-custom shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center">
                        <i class="fa-solid fa-search mr-2"></i>
                        <span>开始识别</span>
                    </button>
                </div>

                <!-- 右侧：结果展示 -->
                <div class="space-y-6">
                    <div class="hidden" id="loading-container">
                        <div class="bg-neutral-50 rounded-lg p-8 text-center">
                            <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary mb-4"></div>
                            <p class="text-neutral-600">正在识别车牌，请稍候...</p>
                        </div>
                    </div>

                    <div class="hidden" id="result-container">
                        <h3 class="text-lg font-semibold text-neutral-700 mb-3">识别结果</h3>

                        <div class="bg-neutral-50 rounded-lg p-4 mb-6">
                            <div id="result-message" class="text-neutral-600 mb-4"></div>

                            <div id="plates-list" class="space-y-3">
                                <!-- 识别结果将在这里动态显示 -->
                            </div>
                        </div>

                        <div class="bg-neutral-50 rounded-lg p-4">
                            <h4 class="text-md font-medium text-neutral-700 mb-3">识别后图片</h4>
                            <div class="relative overflow-hidden rounded-lg border border-neutral-200 bg-neutral-100">
                                <img id="result-image" src="" alt="识别结果图片" class="max-w-full max-h-64 object-contain mx-auto">
                            </div>
                        </div>
                    </div>

                    <div id="empty-state" class="bg-neutral-50 rounded-lg p-8 text-center">
                        <i class="fa-solid fa-info-circle text-4xl text-neutral-400 mb-4"></i>
                        <p class="text-neutral-500">请上传一张包含车牌的图片进行识别</p>
                    </div>
                </div>
            </div>
        </section>


    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral-700 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">车牌识别系统</h3>
                    <p class="text-neutral-300">高效、准确的车牌识别解决方案，为智能交通和安防领域提供技术支持。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <i class="fa-solid fa-envelope text-neutral-400 mr-2"></i>
                            <a href="mailto:contact@example.com" class="text-neutral-300 hover:text-white transition-custom">bj3531781462@163.com
                            </a>
                        </li>
                        <li class="flex items-center">
                            <i class="fa-solid fa-phone text-neutral-400 mr-2"></i>
                            <span class="text-neutral-300">+86 131-3702-7995</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-neutral-600 flex items-center justify-center hover:bg-primary transition-custom">
                            <i class="fa-brands fa-weixin"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-neutral-600 flex items-center justify-center hover:bg-primary transition-custom">
                            <i class="fa-brands fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-neutral-600 flex items-center justify-center hover:bg-primary transition-custom">
                            <i class="fa-brands fa-github"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-neutral-600 mt-8 pt-6 text-center text-neutral-400 text-sm">
                <p>&copy; 2025 车牌识别系统 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // DOM元素
            const dropArea = document.getElementById('drop-area');
            const imageInput = document.getElementById('image-input');
            const selectImageBtn = document.getElementById('select-image-btn');
            const previewContainer = document.getElementById('preview-container');
            const imagePreview = document.getElementById('image-preview');
            const removeImageBtn = document.getElementById('remove-image-btn');
            const recognizeBtn = document.getElementById('recognize-btn');
            const loadingContainer = document.getElementById('loading-container');
            const resultContainer = document.getElementById('result-container');
            const emptyState = document.getElementById('empty-state');
            const resultMessage = document.getElementById('result-message');
            const platesList = document.getElementById('plates-list');
            const resultImage = document.getElementById('result-image');
            const exampleImages = document.querySelectorAll('.example-image');

            // API配置
            const API_URL = 'http://localhost:5000/api/recognize';

            // 状态变量
            let selectedImage = null;

            // 初始化
            recognizeBtn.disabled = true;

            // 事件监听器
            selectImageBtn.addEventListener('click', () => imageInput.click());

            imageInput.addEventListener('change', handleFileSelect);

            removeImageBtn.addEventListener('click', removeImage);

            recognizeBtn.addEventListener('click', recognizeLicensePlate);

            dropArea.addEventListener('dragover', handleDragOver);
            dropArea.addEventListener('dragleave', handleDragLeave);
            dropArea.addEventListener('drop', handleDrop);

            exampleImages.forEach(img => {
                img.addEventListener('click', () => {
                    const src = img.getAttribute('data-src');
                    loadExampleImage(src);
                });
            });

            // 拖放处理函数
            function handleDragOver(e) {
                e.preventDefault();
                dropArea.classList.add('border-primary');
                dropArea.classList.add('bg-primary/5');
            }

            function handleDragLeave(e) {
                e.preventDefault();
                dropArea.classList.remove('border-primary');
                dropArea.classList.remove('bg-primary/5');
            }

            function handleDrop(e) {
                e.preventDefault();
                dropArea.classList.remove('border-primary');
                dropArea.classList.remove('bg-primary/5');

                if (e.dataTransfer.files.length) {
                    handleFiles(e.dataTransfer.files);
                }
            }

            // 处理文件选择
            function handleFileSelect(e) {
                if (e.target.files.length) {
                    handleFiles(e.target.files);
                }
            }

            // 处理文件
            function handleFiles(files) {
                const file = files[0];
                if (file && file.type.startsWith('image/')) {
                    selectedImage = file;
                    displayImagePreview(file);
                } else {
                    showNotification('请选择有效的图片文件', 'error');
                }
            }

            // 显示图片预览
            function displayImagePreview(file) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    imagePreview.src = e.target.result;
                    previewContainer.classList.remove('hidden');
                    emptyState.classList.add('hidden');
                    recognizeBtn.disabled = false;

                    // 添加淡入动画
                    imagePreview.style.opacity = '0';
                    setTimeout(() => {
                        imagePreview.style.opacity = '1';
                        imagePreview.style.transition = 'opacity 0.3s ease-in-out';
                    }, 10);
                };

                reader.readAsDataURL(file);
            }

            // 移除图片
            function removeImage() {
                selectedImage = null;
                imagePreview.src = '';
                previewContainer.classList.add('hidden');
                resultContainer.classList.add('hidden');
                emptyState.classList.remove('hidden');
                recognizeBtn.disabled = true;
            }

            // 加载示例图片
            function loadExampleImage(src) {
                imagePreview.src = src;
                previewContainer.classList.remove('hidden');
                emptyState.classList.add('hidden');
                recognizeBtn.disabled = false;

                // 模拟一个临时文件对象
                selectedImage = new File([new ArrayBuffer(1)], 'example.jpg', { type: 'image/jpeg' });
            }

            // 识别车牌
            function recognizeLicensePlate() {
                if (!selectedImage) return;

                // 显示加载状态
                loadingContainer.classList.remove('hidden');
                resultContainer.classList.add('hidden');
                recognizeBtn.disabled = true;

                // 准备表单数据
                const formData = new FormData();
                formData.append('image', selectedImage);

                // 发送请求
                fetch(API_URL, {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('服务器响应错误');
                    }
                    return response.json();
                })
                .then(data => {
                    // 隐藏加载状态
                    loadingContainer.classList.add('hidden');

                    if (data.status === 'success') {
                        // 显示识别结果
                        resultContainer.classList.remove('hidden');
                        resultMessage.textContent = data.message;

                        // 显示识别出的车牌
                        platesList.innerHTML = '';
                        if (data.plates && data.plates.length > 0) {
                            data.plates.forEach((plate, index) => {
                                const plateItem = document.createElement('div');
                                plateItem.className = 'flex items-center justify-between bg-white p-3 rounded-lg shadow-sm';
                                plateItem.innerHTML = `
                                    <div>
                                        <div class="font-medium text-neutral-700">车牌 #${index + 1}</div>
                                        <div class="text-sm text-neutral-500">${plate.plate_number}</div>
                                    </div>
                                    <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                                        置信度: ${(plate.confidence * 100).toFixed(1)}%
                                    </div>
                                `;
                                platesList.appendChild(plateItem);
                            });
                        }

                        // 显示处理后的图片
                        resultImage.src = data.image_url;
                        resultImage.onload = function() {
                            // 添加淡入动画
                            resultImage.style.opacity = '0';
                            setTimeout(() => {
                                resultImage.style.opacity = '1';
                                resultImage.style.transition = 'opacity 0.3s ease-in-out';
                            }, 10);
                        };
                    } else {
                        showNotification(data.message || '识别失败', 'error');
                    }
                })
                .catch(error => {
                    loadingContainer.classList.add('hidden');
                    showNotification('请求处理失败: ' + error.message, 'error');
                })
                .finally(() => {
                    recognizeBtn.disabled = false;
                });
            }

            // 显示通知
            function showNotification(message, type = 'info') {
                // 创建通知元素
                const notification = document.createElement('div');
                notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full opacity-0 ${
                    type === 'error' ? 'bg-red-500 text-white' : 'bg-blue-500 text-white'
                }`;
                notification.innerHTML = `
                    <div class="flex items-center">
                        <i class="fa-solid ${type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'} mr-2"></i>
                        <span>${message}</span>
                    </div>
                `;

                // 添加到页面
                document.body.appendChild(notification);

                // 显示通知
                setTimeout(() => {
                    notification.classList.remove('translate-x-full', 'opacity-0');
                }, 10);

                // 自动关闭
                setTimeout(() => {
                    notification.classList.add('translate-x-full', 'opacity-0');
                    setTimeout(() => {
                        document.body.removeChild(notification);
                    }, 300);
                }, 5000);
            }
        });
    </script>
</body>
</html>